<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efeito de Onda</title>

<style>
#theDiv {
 position : relative;  z-index: 8; visibility : visible; align : center; color:#555555;
 }
</style>

<script language="JavaScript">

function nextSize(i,incMethod,textLength)
{
    /**
	 * Math.abs -> Retorna o valor absoluto de um número.
	 * Math.sin -> Retorna o seno de um número.
	 * Math.cos -> Retorna o cosseno de um número.
	 */
    if (incMethod == 1) { 
        return (22*Math.abs(Math.sin(i/(textLength/3.14))) );
    }
    
    if (incMethod == 2) { 
        return (255*Math.abs(Math.cos(i/(textLength/3.14))));
    }
    
    return(0)
}

function doWave(n) {
	/**
	 * setTimeout -> executa uma função, uma vez que, depois de esperar um número especificado de milissegundos
	 */
    var theText = 'Efeito de Onda Muito Bom!!!!';
    
    sizeCycle(theText,1,n);
    
    if (n > theText.length) {
        n=0
    }
    setTimeout("doWave(" + (n+1) + ")", 50);
}

function sizeCycle(text,method,dis)
{
	/**
	 * document.all -> entende o array de todas as camadas "div" no documento.
	 * parseInt -> função analisa uma string e retorna um inteiro.
	 * substring -> método extrai os caracteres de uma string, entre dois índices especificados, e retorna o novo sub string.
	 * InnerHTML -> executa uma troca de conteúdo em uma tag “div” especificada. (AJAX)
	 * getElementById -> Essa função pode retornar o objeto de qualquer elemento na página que tenha um id único.
	 * createRange -> Retorna um novo objeto Range.
	 * setStartBefore -> Para definir a posição inicial a um ponto que não é o ponto inicial ou final de qualquer nó, use o método
	 * createContextualFragment -> permite-lhe analisar uma seqüência de HTML em um DocumentFragment usando o nó inicial de um Document Object Model 
	 * hasChildNodes -> retorna TRUE se o nó do elemento atual tem nós filhos, e false caso contrário.
	 * removeChild -> remove um nó filho. Esta função retorna o nó removido em caso de sucesso, ou NULL em caso de falha.
	 * lastChild -> retorna o último nó filho do nó especificado.
	 * appendChild -> esse método inclui um nó após o último nó filho do nó elemento especificado. Esse método retorna o novo nó filho.
	 * layers-> descreve uma div com posição absoluta 
	 */
    var output = "";
    
    for (i = 0; i < text.length; i++) {
        
        size = parseInt(nextSize(i +dis,method,text.length));
        output += "<font style='font-size: "+ size +"pt'>" +text.substring(i,i+1)+ "</font>";
    }
    
    if (document.all){
        
        theDiv.innerHTML = output;
        
    } else if (document.getElementById){
        
        rng = document.createRange();
        el = document.getElementById('theDiv');
        rng.setStartBefore(el);
        htmlFrag = rng.createContextualFragment(output);
        
        while (el.hasChildNodes()) el.removeChild(el.lastChild);
        el.appendChild(htmlFrag);
    
    } else if (document.layers){
    
        document.theDiv.document.write("<font face='Verdana'point-size=11>"+output+"</font>");
        document.theDiv.document.close();
    }
}
</script>
</head>

<body>
	<body onload="doWave(0)">
    	<div ID="theDiv" align="center">
    </div>
</body>
</html>